<!--  费用预算-->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search ref="search"  :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <div class="flex" style="display: flex;justify-content: space-between;align-items: center">
            <!-- 操作按钮区域 -->
            <div class='table-operator'>
              <a-button v-has ="'costbudget:add'" type="primary" @click="handleAdd">新增</a-button>
              <a-button v-has ="'costbudget:delete'" type="primary" @click='batchDel'>删除</a-button>
              <a-button v-has ="'costbudget:start'" type="primary" @click="stateChange('1')">启用</a-button>
              <a-button v-has ="'costbudget:stop'" type="primary" @click="stateChange('0')">禁用</a-button>
              <a-button v-has ="'apllcation:down'"  type="primary" @click="handleExportXls('预算费用')">模板下载</a-button>
              <a-upload
                :action="importExcelUrl"
                :headers="tokenHeader1"
                :multiple="false"
                :showUploadList="false"
                name="file"
                @change="handleImportExcel"
              >
                <a-button v-has ="'costbudget:getIn'"  type="primary">导入</a-button>
              </a-upload>
              <a-button v-has ="'costbudget:getOut'"  type='primary' @click="downExportXls('tpm_budget_fee_service')">导出</a-button>
              <a-button v-has ="'costbudget:getOut'"  type='primary' @click="downExportXls('tpmBudgetFeeDetail_service')">明细导出</a-button>
            </div>
<!--            <div class='moreData-box'>-->
<!--              <span style='fontWeight:700'>预算余额:</span>-->
<!--              <span style='margin:12px 0'>当页合计: {{ moneyData.pagePriceAmount  || '暂无' }}</span>-->
<!--              <span>总合计:{{ moneyData.totalAmount  || '暂无' }}</span>-->
<!--            </div>-->
          </div>

        </template>
        <template #budgetCode='{ row,rowIndex }'>
          <a @click='onDblclicks(row)'>{{ row.budgetCode }}</a>
        </template>
        <template #status='{ row }'>
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #action='{ row:record }'>
          <a @click="handleSeeDetail(record)">明细</a>
          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>
              更多
              <a-icon type='down' />
            </a>
            <a-menu slot='overlay'>
              <a-menu-item>
                <a v-has ="'costbudget:change'" @click="handleCostChange(record)">变更</a>
              </a-menu-item>
              <a-menu-item>
                <a v-has ="'costbudget:changes'" @click='handlecostAdjust(record)'>调整</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>

        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->


    <cost-add ref="modalForm" @ok='modalFormOk'></cost-add>
    <cost-detail  ref="detailForm"></cost-detail>
    <cost-change  ref="changeForm"  @ok='modalFormOk'></cost-change>
    <cost-adjust  ref="adjustForm"  @ok='modalFormOk'></cost-adjust>
    <business-log ref="businessLog"></business-log>

  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@api/manage'
import costAdd from '@views/tmr/budget/model/costAdd'
import costDetail from '@views/tmr/budget/model/costDetail'
import costChange  from '@views/tmr/budget/model/costChange'
import costAdjust  from '@views/tmr/budget/model/costAdjust'
import Vue from 'vue'
import JEllipsis from "@/components/cn-form/JEllipsis";
import { ACCESS_TOKEN } from '@/store/mutation-types'
import pick from 'lodash.pick'
let month=[
  {
    name:'01',
    value:'01'
  },{
    name:'02',
    value:'02'
  },{
    name:'03',
    value:'03'
  },{
    name:'04',
    value:'04'
  },{
    name:'05',
    value:'05'
  },{
    name:'06',
    value:'06'
  },{
    name:'07',
    value:'07'
  },{
    name:'08',
    value:'08'
  },{
    name:'09',
    value:'09'
  },{
    name:'10',
    value:'10'
  },{
    name:'11',
    value:'11'
  },{
    name:'12',
    value:'12'
  }]

export default {
  name: 'costBudget',
  mixins:[PageListMixin],
  components: {
    costAdd,costDetail,costChange,costAdjust,JEllipsis
  },
  data () {
    return {
      permflag:'tpm_budget_fee_impl',
      tokenHeader1: {'loginUserToken':  Vue.ls.get(ACCESS_TOKEN)},
      description: '费用预算',
      searchConfig:[
        {
          type:'input',
          name:'budgetCode',
          placeholder:'费用预算编号',
        },
        // {
        //   type:'input',
        //   name:'budgetSubjectsName',
        //   placeholder:'请输入费用预算名称',
        // },
        {
          type:'j-select',
          name:'budgetType',
          dictCode:"budget_type",
          placeholder:'费用预算类型',
        },
        {
          type:'input',
          name:'budgetOrgCode',
          placeholder:'对象编码',
        },
        {
          type:'input',
          name:'budgetOrgName',
          placeholder:'对象名称',
        },
        {
          type:'input',
          name:'custCode',
          placeholder:'经销商编码',
        },
        {
          type:'input',
          name:'custName',
          placeholder:'经销商名称',
        },
        {
          type: 'j-select',
          dictCode:'budget_year',
          name:'budgetYear',
          placeholder:'年度',
        },{
          type:'a-select',
          name:'budgetQuarter',
          placeholder:'季度',
          option: [
            {
              name:'一季度',
              value:1
            },
            {
              name:'二季度',
              value:2
            },
            {
              name:'三季度',
              value:3
            },
            {
              name:'四季度',
              value:4
            },
          ]
        },{
          type:'a-select',
          name:'budgetMonth',
          option: month,
          placeholder:'月份'
        },
        {
          type: 'a-select',
          name: 'status',
          placeholder: '状态',
          option: [
            {
              name: '启用',
              value: 1
            },
            {
              name: '停用',
              value: 0
            }]
        }
      ],
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' ,field: 'a',},
        {
          title: '费用预算编号',
          field: 'budgetCode',
          minWidth: 120,
          slots: { default: 'budgetCode' },
        },
        {
          title: '费用预算类型',
          minWidth: 120,
          field: 'budgetTypeStr',
        },
        {
          title: '对象',
          minWidth: 80,
          field: 'budgetOrgName',
        },
        {
          title: '年份',
          minWidth: 80,
          field: 'budgetYear',
        },
        {
          title: '季度',
          minWidth: 80,
          field: 'budgetQuarter'
        },
        {
          title: '月份',
          minWidth: 80,
          field: 'budgetMonth'
        },
        {
          title: '初期金额',
          minWidth: 80,
          field: 'initAmount'
        },
        {
          title: '预算科目编码',
          minWidth: 120,
          field: 'budgetSubjectsCode'
        },
        {
          title: '预算科目名称',
          field: 'budgetSubjectsName',
          minWidth: 120,
        },
        {
          title: '产品层级',
          minWidth: 80,
          field: 'productLevelName'
        },
        {
          title: '商品',
          minWidth: 80,
          field: 'productName'
        },
        {
          title: '备注',
          minWidth: 80,
          field: 'remarks'
        },
        {
          title: '创建人',
          minWidth: 80,
          field: 'createName',

        },
        {
          title: '创建时间',
          minWidth: 150,
          field: 'createTime',
        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName',

        },
        {
          title: '更新时间',
          minWidth: 150,
          field: 'updateTime',
        },
        {
          title: '当前余额',
          minWidth: 80,
          field: 'amount',
        },
        {
          title: '状态',
          field: 'status',
          minWidth: 80,
          fixed:'right',
          slots: { default: 'status' },
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 120,
          fixed: 'right',
          slots: { default: 'action' },
        }
      ],
      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL']+ "/budget/tpmBudgetFee/findPageList",
        // 详情接口
        // detail: window._CONFIG['domianKaURL']+ "/kaOrder/getInfo",
        // 导出接口
        // exportXlsUrl: window._CONFIG['domianTpmURL']+"budget/tpmBudgetFee/exportXls",
        // 导入接口
        importExcelUrl: window._CONFIG['domianTpmURL'] + "/budget/tpmBudgetFee/importExcel",
        // 模版下载
        exportXlsUrl: window._CONFIG['domianTpmURL'] + "/budget/tpmBudgetFee/exportXls",
        // 删除接口
        deleteBatch:window._CONFIG['domianTpmURL']+ "/budget/tpmBudgetFee/deleteBatch",
        // 启停用接口
        status:window._CONFIG['domianTpmURL']+ "/budget/tpmBudgetFee/startOrStop",
        startOrStopUrl:window._CONFIG['domianTpmURL']+ "/budget/tpmBudgetFee/startOrStop",
      },
      moneyData:{},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  created() {


  },
  beforeMount() {



  },



  watch:{

  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // }
  },
  methods: {
    async loadData(arg) {
      if (!this.url || !this.url.list) {
        // this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      console.log(params)
      this.loading = true;
      let request = null
      const isNoPagnation = ['getDictByCode'].some(url => new RegExp(`${url}$`).test(this.url.list))
      if (isNoPagnation) {
        request = getAction
      } else {
        request = postAction
      }
      var that = this
      let res = await request(this.url.list, params)
      if (res.success) {
        let {
          records = [],
          total
        } = res.result;
        if (!isNoPagnation) that.ipagination.total = total || 0;
        let a = res.result
        that.ipagination.current = a.current || 0
        that.ipagination.total = a.total || 0
        that.dataSource = res.result.records
        that.moneyData = pick(res.result,'pagePriceAmount','totalAmount')
      }else{
        that.$message.warning(res.message)
      }
      that.loading = false;
    },
    importExcelUrl: function() {
      return `${this.url.importExcelUrl}`;
    },
    handleSeeDetail(record){
      this.$refs.detailForm.edit({...record})
      this.$refs.detailForm.disableSubmit = false
    },
    handleCostChange(record){
      this.$refs.changeForm.edit({...record})
      this.$refs.changeForm.disableSubmit = false
    },
    handlecostAdjust(record){
      this.$refs.adjustForm.edit({...record})
      this.$refs.adjustForm.disableSubmit = false
    },
    onDblclicks:async function (record){
        if (this.url.detail) {
          const res = await getAction(this.url.detail, {id: record.id})
          if (res && res.result) {
            record = res.result
          }else{
            this.$message.error(res.message)
          }
        }
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "查看";
        this.$refs.modalForm.disabled = true;
    },

  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-pagination{
  float:right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}

  .moreData-box {
    display: flex;
    margin-left: 12px;
    align-items: center;
    gap: 30px;
  }

</style>